<template>
  <div class="sub-page-container">
    <div class="layout">
      <a-page-header title="应用管理" :show-back="false">
        <template #extra>
          <a-space>
            <a-button type="text" size="large">
              <template #icon>
                <icon-file />
              </template>
              使用指南
            </a-button>
            <a-button type="primary" size="large">
              <template #icon>
                <icon-plus />
              </template>
              创建应用
            </a-button>
          </a-space>
        </template>

        <a-grid :cols="{ xs: 1, sm: 1, md: 2, lg: 3, xl: 4, xxl: 4 }" :colGap="12" :rowGap="16">
          <AppManagementCard
            v-for="item in appGroupList"
            :key="item.id"
            v-bind="item"
          ></AppManagementCard>
        </a-grid>


      </a-page-header>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { queryAppManagementList } from '@/api/app-center';
import type { AppManagementRecord } from '@/api/app-center';
import AppManagementCard from './components/AppManagementCard.vue';

const appGroupList = ref<AppManagementRecord[]>([]);

onMounted(() => {
  _getAppGroupList();
});

function _getAppGroupList() {
  queryAppManagementList().then(res => {
    appGroupList.value = res;
  });
}
</script>

<style scoped lang="less">
.layout {
  height: 100%;
  background-color: #f5f6fa;
  background-image: linear-gradient(180deg, #fcfcfc, #f5f6fa 10%, #f5f6fa);
}

.appCenter-aside {
  height: 100%;
  position: relative;
}

.appCenter-main {
  height: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
  width: 100%;
}
</style>

<style lang="less" scoped>
// responsive
@media (max-width: @screen-lg) {
  .layout {
    flex-wrap: wrap;

    &-left-side {
      flex: 1;
      flex-basis: 100%;
      margin-bottom: 16px;
    }

    &-content {
      flex: none;
      flex-basis: 100%;
      order: -1;
      padding: 0;
      margin-bottom: 16px;
    }

    &-right-side {
      flex-basis: 100%;
    }
  }
}
</style>
